<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4628720" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe795;</span>
                <div class="name">073_备注</div>
                <div class="code-name">&amp;#xe795;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe796;</span>
                <div class="name">073_城市服务</div>
                <div class="code-name">&amp;#xe796;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe797;</span>
                <div class="name">073_办公</div>
                <div class="code-name">&amp;#xe797;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe798;</span>
                <div class="name">073_存款</div>
                <div class="code-name">&amp;#xe798;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe799;</span>
                <div class="name">073_定投</div>
                <div class="code-name">&amp;#xe799;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79a;</span>
                <div class="name">073_档案</div>
                <div class="code-name">&amp;#xe79a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79b;</span>
                <div class="name">073_打卡</div>
                <div class="code-name">&amp;#xe79b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79c;</span>
                <div class="name">073_定期</div>
                <div class="code-name">&amp;#xe79c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79d;</span>
                <div class="name">073_分析</div>
                <div class="code-name">&amp;#xe79d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79e;</span>
                <div class="name">073_公告</div>
                <div class="code-name">&amp;#xe79e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79f;</span>
                <div class="name">073_房贷</div>
                <div class="code-name">&amp;#xe79f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a0;</span>
                <div class="name">073_存钱</div>
                <div class="code-name">&amp;#xe7a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a1;</span>
                <div class="name">073_股票</div>
                <div class="code-name">&amp;#xe7a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a2;</span>
                <div class="name">073_合同</div>
                <div class="code-name">&amp;#xe7a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a3;</span>
                <div class="name">073_股市</div>
                <div class="code-name">&amp;#xe7a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a4;</span>
                <div class="name">073_红包-14</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a5;</span>
                <div class="name">073_贵金属</div>
                <div class="code-name">&amp;#xe7a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a6;</span>
                <div class="name">073_回单</div>
                <div class="code-name">&amp;#xe7a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a7;</span>
                <div class="name">073_计算器</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a8;</span>
                <div class="name">073_货币</div>
                <div class="code-name">&amp;#xe7a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a9;</span>
                <div class="name">073_基金</div>
                <div class="code-name">&amp;#xe7a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7aa;</span>
                <div class="name">073_积分-22</div>
                <div class="code-name">&amp;#xe7aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ab;</span>
                <div class="name">073_红包-46</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ac;</span>
                <div class="name">073_汇率</div>
                <div class="code-name">&amp;#xe7ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ad;</span>
                <div class="name">073_卡券</div>
                <div class="code-name">&amp;#xe7ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ae;</span>
                <div class="name">073_理财-10</div>
                <div class="code-name">&amp;#xe7ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7af;</span>
                <div class="name">073_警告</div>
                <div class="code-name">&amp;#xe7af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b0;</span>
                <div class="name">073_礼物</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b1;</span>
                <div class="name">073_警报</div>
                <div class="code-name">&amp;#xe7b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b2;</span>
                <div class="name">073_内参</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b3;</span>
                <div class="name">073_钱包</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b4;</span>
                <div class="name">073_排行</div>
                <div class="code-name">&amp;#xe7b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b5;</span>
                <div class="name">073_私信</div>
                <div class="code-name">&amp;#xe7b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b6;</span>
                <div class="name">073_理财-48</div>
                <div class="code-name">&amp;#xe7b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b7;</span>
                <div class="name">073_统计</div>
                <div class="code-name">&amp;#xe7b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b8;</span>
                <div class="name">073_网点</div>
                <div class="code-name">&amp;#xe7b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b9;</span>
                <div class="name">073_升级</div>
                <div class="code-name">&amp;#xe7b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ba;</span>
                <div class="name">073_数据</div>
                <div class="code-name">&amp;#xe7ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bb;</span>
                <div class="name">073_行情</div>
                <div class="code-name">&amp;#xe7bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bc;</span>
                <div class="name">073_现金</div>
                <div class="code-name">&amp;#xe7bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bd;</span>
                <div class="name">073_通知</div>
                <div class="code-name">&amp;#xe7bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7be;</span>
                <div class="name">073_银行卡</div>
                <div class="code-name">&amp;#xe7be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bf;</span>
                <div class="name">073_委托</div>
                <div class="code-name">&amp;#xe7bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c0;</span>
                <div class="name">073_账单</div>
                <div class="code-name">&amp;#xe7c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c1;</span>
                <div class="name">073_转账</div>
                <div class="code-name">&amp;#xe7c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c2;</span>
                <div class="name">073_银行</div>
                <div class="code-name">&amp;#xe7c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c3;</span>
                <div class="name">073_账本</div>
                <div class="code-name">&amp;#xe7c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c4;</span>
                <div class="name">073_转帐</div>
                <div class="code-name">&amp;#xe7c4;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1721624304069'); /* IE9 */
  src: url('iconfont.eot?t=1721624304069#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1721624304069') format('woff'),
       url('iconfont.ttf?t=1721624304069') format('truetype'),
       url('iconfont.svg?t=1721624304069#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_beizhu"></span>
            <div class="name">
              073_备注
            </div>
            <div class="code-name">.icon-a-073_beizhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_chengshifuwu"></span>
            <div class="name">
              073_城市服务
            </div>
            <div class="code-name">.icon-a-073_chengshifuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_bangong"></span>
            <div class="name">
              073_办公
            </div>
            <div class="code-name">.icon-a-073_bangong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_cunkuan"></span>
            <div class="name">
              073_存款
            </div>
            <div class="code-name">.icon-a-073_cunkuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_dingtou"></span>
            <div class="name">
              073_定投
            </div>
            <div class="code-name">.icon-a-073_dingtou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_dangan"></span>
            <div class="name">
              073_档案
            </div>
            <div class="code-name">.icon-a-073_dangan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_daka"></span>
            <div class="name">
              073_打卡
            </div>
            <div class="code-name">.icon-a-073_daka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_dingqi"></span>
            <div class="name">
              073_定期
            </div>
            <div class="code-name">.icon-a-073_dingqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_fenxi"></span>
            <div class="name">
              073_分析
            </div>
            <div class="code-name">.icon-a-073_fenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_gonggao"></span>
            <div class="name">
              073_公告
            </div>
            <div class="code-name">.icon-a-073_gonggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_fangdai"></span>
            <div class="name">
              073_房贷
            </div>
            <div class="code-name">.icon-a-073_fangdai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_cunqian"></span>
            <div class="name">
              073_存钱
            </div>
            <div class="code-name">.icon-a-073_cunqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_gupiao"></span>
            <div class="name">
              073_股票
            </div>
            <div class="code-name">.icon-a-073_gupiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_hetong"></span>
            <div class="name">
              073_合同
            </div>
            <div class="code-name">.icon-a-073_hetong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_gushi"></span>
            <div class="name">
              073_股市
            </div>
            <div class="code-name">.icon-a-073_gushi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_hongbao-14"></span>
            <div class="name">
              073_红包-14
            </div>
            <div class="code-name">.icon-a-073_hongbao-14
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_guijinshu"></span>
            <div class="name">
              073_贵金属
            </div>
            <div class="code-name">.icon-a-073_guijinshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_huidan"></span>
            <div class="name">
              073_回单
            </div>
            <div class="code-name">.icon-a-073_huidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_jisuanqi"></span>
            <div class="name">
              073_计算器
            </div>
            <div class="code-name">.icon-a-073_jisuanqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_huobi"></span>
            <div class="name">
              073_货币
            </div>
            <div class="code-name">.icon-a-073_huobi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_jijin"></span>
            <div class="name">
              073_基金
            </div>
            <div class="code-name">.icon-a-073_jijin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_jifen-22"></span>
            <div class="name">
              073_积分-22
            </div>
            <div class="code-name">.icon-a-073_jifen-22
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_hongbao-46"></span>
            <div class="name">
              073_红包-46
            </div>
            <div class="code-name">.icon-a-073_hongbao-46
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_huishuai"></span>
            <div class="name">
              073_汇率
            </div>
            <div class="code-name">.icon-a-073_huishuai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_kaquan"></span>
            <div class="name">
              073_卡券
            </div>
            <div class="code-name">.icon-a-073_kaquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_licai-10"></span>
            <div class="name">
              073_理财-10
            </div>
            <div class="code-name">.icon-a-073_licai-10
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_jinggao"></span>
            <div class="name">
              073_警告
            </div>
            <div class="code-name">.icon-a-073_jinggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_liwu"></span>
            <div class="name">
              073_礼物
            </div>
            <div class="code-name">.icon-a-073_liwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_jingbao"></span>
            <div class="name">
              073_警报
            </div>
            <div class="code-name">.icon-a-073_jingbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_neican"></span>
            <div class="name">
              073_内参
            </div>
            <div class="code-name">.icon-a-073_neican
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_qianbao"></span>
            <div class="name">
              073_钱包
            </div>
            <div class="code-name">.icon-a-073_qianbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_paihang"></span>
            <div class="name">
              073_排行
            </div>
            <div class="code-name">.icon-a-073_paihang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_sixin"></span>
            <div class="name">
              073_私信
            </div>
            <div class="code-name">.icon-a-073_sixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_licai-48"></span>
            <div class="name">
              073_理财-48
            </div>
            <div class="code-name">.icon-a-073_licai-48
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_tongji"></span>
            <div class="name">
              073_统计
            </div>
            <div class="code-name">.icon-a-073_tongji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_wangdian"></span>
            <div class="name">
              073_网点
            </div>
            <div class="code-name">.icon-a-073_wangdian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_shengji"></span>
            <div class="name">
              073_升级
            </div>
            <div class="code-name">.icon-a-073_shengji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_shuju"></span>
            <div class="name">
              073_数据
            </div>
            <div class="code-name">.icon-a-073_shuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_hangqing"></span>
            <div class="name">
              073_行情
            </div>
            <div class="code-name">.icon-a-073_hangqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_xianjin"></span>
            <div class="name">
              073_现金
            </div>
            <div class="code-name">.icon-a-073_xianjin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_tongzhi"></span>
            <div class="name">
              073_通知
            </div>
            <div class="code-name">.icon-a-073_tongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_yinhangka"></span>
            <div class="name">
              073_银行卡
            </div>
            <div class="code-name">.icon-a-073_yinhangka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_weituo"></span>
            <div class="name">
              073_委托
            </div>
            <div class="code-name">.icon-a-073_weituo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_zhangdan"></span>
            <div class="name">
              073_账单
            </div>
            <div class="code-name">.icon-a-073_zhangdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_zhuanzhang"></span>
            <div class="name">
              073_转账
            </div>
            <div class="code-name">.icon-a-073_zhuanzhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_yinhang"></span>
            <div class="name">
              073_银行
            </div>
            <div class="code-name">.icon-a-073_yinhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_zhangben"></span>
            <div class="name">
              073_账本
            </div>
            <div class="code-name">.icon-a-073_zhangben
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-073_zhuanzhang1"></span>
            <div class="name">
              073_转帐
            </div>
            <div class="code-name">.icon-a-073_zhuanzhang1
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_beizhu"></use>
                </svg>
                <div class="name">073_备注</div>
                <div class="code-name">#icon-a-073_beizhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_chengshifuwu"></use>
                </svg>
                <div class="name">073_城市服务</div>
                <div class="code-name">#icon-a-073_chengshifuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_bangong"></use>
                </svg>
                <div class="name">073_办公</div>
                <div class="code-name">#icon-a-073_bangong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_cunkuan"></use>
                </svg>
                <div class="name">073_存款</div>
                <div class="code-name">#icon-a-073_cunkuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_dingtou"></use>
                </svg>
                <div class="name">073_定投</div>
                <div class="code-name">#icon-a-073_dingtou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_dangan"></use>
                </svg>
                <div class="name">073_档案</div>
                <div class="code-name">#icon-a-073_dangan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_daka"></use>
                </svg>
                <div class="name">073_打卡</div>
                <div class="code-name">#icon-a-073_daka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_dingqi"></use>
                </svg>
                <div class="name">073_定期</div>
                <div class="code-name">#icon-a-073_dingqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_fenxi"></use>
                </svg>
                <div class="name">073_分析</div>
                <div class="code-name">#icon-a-073_fenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_gonggao"></use>
                </svg>
                <div class="name">073_公告</div>
                <div class="code-name">#icon-a-073_gonggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_fangdai"></use>
                </svg>
                <div class="name">073_房贷</div>
                <div class="code-name">#icon-a-073_fangdai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_cunqian"></use>
                </svg>
                <div class="name">073_存钱</div>
                <div class="code-name">#icon-a-073_cunqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_gupiao"></use>
                </svg>
                <div class="name">073_股票</div>
                <div class="code-name">#icon-a-073_gupiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_hetong"></use>
                </svg>
                <div class="name">073_合同</div>
                <div class="code-name">#icon-a-073_hetong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_gushi"></use>
                </svg>
                <div class="name">073_股市</div>
                <div class="code-name">#icon-a-073_gushi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_hongbao-14"></use>
                </svg>
                <div class="name">073_红包-14</div>
                <div class="code-name">#icon-a-073_hongbao-14</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_guijinshu"></use>
                </svg>
                <div class="name">073_贵金属</div>
                <div class="code-name">#icon-a-073_guijinshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_huidan"></use>
                </svg>
                <div class="name">073_回单</div>
                <div class="code-name">#icon-a-073_huidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_jisuanqi"></use>
                </svg>
                <div class="name">073_计算器</div>
                <div class="code-name">#icon-a-073_jisuanqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_huobi"></use>
                </svg>
                <div class="name">073_货币</div>
                <div class="code-name">#icon-a-073_huobi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_jijin"></use>
                </svg>
                <div class="name">073_基金</div>
                <div class="code-name">#icon-a-073_jijin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_jifen-22"></use>
                </svg>
                <div class="name">073_积分-22</div>
                <div class="code-name">#icon-a-073_jifen-22</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_hongbao-46"></use>
                </svg>
                <div class="name">073_红包-46</div>
                <div class="code-name">#icon-a-073_hongbao-46</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_huishuai"></use>
                </svg>
                <div class="name">073_汇率</div>
                <div class="code-name">#icon-a-073_huishuai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_kaquan"></use>
                </svg>
                <div class="name">073_卡券</div>
                <div class="code-name">#icon-a-073_kaquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_licai-10"></use>
                </svg>
                <div class="name">073_理财-10</div>
                <div class="code-name">#icon-a-073_licai-10</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_jinggao"></use>
                </svg>
                <div class="name">073_警告</div>
                <div class="code-name">#icon-a-073_jinggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_liwu"></use>
                </svg>
                <div class="name">073_礼物</div>
                <div class="code-name">#icon-a-073_liwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_jingbao"></use>
                </svg>
                <div class="name">073_警报</div>
                <div class="code-name">#icon-a-073_jingbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_neican"></use>
                </svg>
                <div class="name">073_内参</div>
                <div class="code-name">#icon-a-073_neican</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_qianbao"></use>
                </svg>
                <div class="name">073_钱包</div>
                <div class="code-name">#icon-a-073_qianbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_paihang"></use>
                </svg>
                <div class="name">073_排行</div>
                <div class="code-name">#icon-a-073_paihang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_sixin"></use>
                </svg>
                <div class="name">073_私信</div>
                <div class="code-name">#icon-a-073_sixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_licai-48"></use>
                </svg>
                <div class="name">073_理财-48</div>
                <div class="code-name">#icon-a-073_licai-48</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_tongji"></use>
                </svg>
                <div class="name">073_统计</div>
                <div class="code-name">#icon-a-073_tongji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_wangdian"></use>
                </svg>
                <div class="name">073_网点</div>
                <div class="code-name">#icon-a-073_wangdian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_shengji"></use>
                </svg>
                <div class="name">073_升级</div>
                <div class="code-name">#icon-a-073_shengji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_shuju"></use>
                </svg>
                <div class="name">073_数据</div>
                <div class="code-name">#icon-a-073_shuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_hangqing"></use>
                </svg>
                <div class="name">073_行情</div>
                <div class="code-name">#icon-a-073_hangqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_xianjin"></use>
                </svg>
                <div class="name">073_现金</div>
                <div class="code-name">#icon-a-073_xianjin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_tongzhi"></use>
                </svg>
                <div class="name">073_通知</div>
                <div class="code-name">#icon-a-073_tongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_yinhangka"></use>
                </svg>
                <div class="name">073_银行卡</div>
                <div class="code-name">#icon-a-073_yinhangka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_weituo"></use>
                </svg>
                <div class="name">073_委托</div>
                <div class="code-name">#icon-a-073_weituo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_zhangdan"></use>
                </svg>
                <div class="name">073_账单</div>
                <div class="code-name">#icon-a-073_zhangdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_zhuanzhang"></use>
                </svg>
                <div class="name">073_转账</div>
                <div class="code-name">#icon-a-073_zhuanzhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_yinhang"></use>
                </svg>
                <div class="name">073_银行</div>
                <div class="code-name">#icon-a-073_yinhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_zhangben"></use>
                </svg>
                <div class="name">073_账本</div>
                <div class="code-name">#icon-a-073_zhangben</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-073_zhuanzhang1"></use>
                </svg>
                <div class="name">073_转帐</div>
                <div class="code-name">#icon-a-073_zhuanzhang1</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
